{% extends 'TopxiaAdminBundle::layout.html.twig' %}

{% set menu = 'admin_cloud_video_setting' %}
{% set script_controller = 'setting/cloud' %}

{% block main %}

<style>
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #fff;
  padding: 5px 10px;
  color: #333;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #e6e6e6;
  border-color: #adadad;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
}

.balloon-uploader {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.balloon-uploader-heading {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  display: none;
}

.balloon-uploader-footer {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}

.balloon-filelist {
  width: 100%;
}

.balloon-filelist-heading {
  position: relative;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.balloon-uploader-body {
  position: relative;

}

.balloon-filelist .file-name,
.balloon-filelist .file-size,
.balloon-filelist .file-status,
.balloon-filelist .file-manage {
  position: relative;
  z-index: 1;
}

.balloon-filelist .file-name {
  margin-right: 250px;
  padding: 8px;
}

.balloon-filelist .file-size {
  position: absolute;
  top: 0px;
  right: 150px;
  width: 100px;
  text-align: right;
  padding: 8px;
}

.balloon-filelist .file-status {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 120px;
  text-align: left;
  padding: 8px;

}

.balloon-filelist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 100px;
  max-height: 300px;
  overflow-y: scroll;
}

.balloon-filelist ul li {
  position: relative;
  border-bottom: 1px solid #ddd;
}

.balloon-dnd {
  visibility: hidden;
}

.balloon-uploader-none .balloon-uploader-footer,
.balloon-uploader-none .balloon-uploader-body {
  visibility: hidden;
}

.balloon-uploader-none .balloon-dnd {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.balloon-nofile {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  text-align: center;
  color: #999;
}

.balloon-uploader .file-pick-btn {
  display: inline-block;
}

.balloon-uploader .start-upload-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #5bc0de;
  padding: 5px 10px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #46b8da;
  overflow: hidden;
}

.balloon-uploader .start-upload-btn:hover {
  background: #31b0d5;
  border-color: #269abc;
}

.balloon-filelist .file-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.balloon-filelist .file-progress-bar {
  background: rgb(219,242,215);
  background: rgba(59, 181, 33, 0.18);
  float: left;
  height: 100%;
}

</style>

{{ web_macro.flash_messages() }}

  {% if videoInfo.enableBuyVideo|default(0) == 1 and videoInfo.remaining|default(0) <= 30 and videoInfo.remaining|default(0) > 0 %}
  <div class="alert alert-warning" role="alert">您的云视频包将于{{videoInfo.remaining|default(0)}}天后到期，请尽快续费。</div>
  {% endif %}
  {% if videoInfo.enableBuyVideo|default(0) == 1 and videoInfo.remaining|default(0) <= 0 %}
    <div class="alert alert-warning" role="alert">您的云视频包已到期，请尽快续费。</div>
  {% endif %}
  {% if info.locked|default(0) == 1 %}
    <div class="alert alert-warning" role="alert">您的云视频已被锁定，请联系客服人员：0571-86819929。</div>
  {% endif %}
  {% if info.enabled|default(1) == 0 or videoStatus.status|default(null) == 'stoped' %}
    <div class="alert alert-danger" role="alert">您的云视频已被禁用，请联系客服人员：0571-86819929。</div>
  {% endif %}

  {% if is_trial() %}
    <div class="row form-group">
      <div class="help-block">
        </br></br>
        <p style = "text-align:center;font-size:16px">视频托管服务由EduSoho教育云提供 <a href="http://open.edusoho.com/educloud" target="_blank">了解详情</a></p>
        </br>
      </div>
    </div>
    <hr>
  {% else %}
  <div class="eduyun-main">
    {% if info.enabled|default(1) == 0 or videoStatus.status|default(null) == 'stoped' %}
      <div class="mask"></div>
    {% endif %}
    <div class="page-header clearfix">
      <h1 class="pull-left">云视频</h1>
    </div>

    <div class="controls radios"> 
      <form class="form-horizontal" id="cloud-video-form" method="post" novalidate>
        {% if storageSetting.upload_mode|default('local') == "local" or info.accessCloud|default(0) == 0 %}
        <div class="row">
          <div class="col-md-2">
            <button type="submit" class="btn btn-primary" name="upload_mode" value="cloud" {% if info.accessCloud|default(0) == 0 %} disabled="disabled"{% endif %} >启用云视频</button>
          </div>
          {% if info.accessCloud|default(0) == 0%}
          <div class="col-md-10">
            <span class="text-danger text-sm" >抱歉，您尚未接入教育云，不能使用云视频服务！</span>
            <p><a href="http://open.edusoho.com/educloud" target="_blank">立即接入</a></p>
          </div>
          {% endif %}
        </div>
        {% elseif storageSetting.upload_mode|default('cloud') == "cloud" %}
        <div>
          <span class="text-success">已启用</span><button type="submit" class="btn btn-default btn-sm mlm" name="upload_mode"value="local" ><span class="text-muted">关闭</span></button>
        </div>
        {% endif %}
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
      </form>
      {% if storageSetting.upload_mode|default('cloud') == "local" %}
      <div class="help-block">
        EduSoho云视频将为您提供稳定、安全、经济、便捷的视频托管服务以及优质的视频播放体验。点击<a href="http://open.edusoho.com/show/cloud/video" target="_blank">这里</a>了解详情。
      </div>
      {% endif %}
    </div>
    
    {% if  info.accessCloud|default(0) != 0 and storageSetting.upload_mode|default('cloud') == "cloud" %}
    <div class="page-header clearfix">
      <h1 class="pull-left">云视频功能设置</h1>
    </div>

    <form class="form-horizontal" id="cloud-setting-form" method="post" novalidate>

      

      <div class="row form-group">
        <div class="col-md-3 control-label">
          <label for="cloud_bucket">云视频Bucket</label>
        </div>
        <div class="controls col-md-8 radios">
          <input type="text" id="cloud_bucket" class="form-control" name="cloud_bucket" value="{{storageSetting.cloud_bucket}}">
        </div>
      </div>
      <div class="row form-group">
        <div class="col-md-3 control-label">
          <label for="support_mobile">手机浏览器MP4视频</label>
        </div>
        <div class="controls col-md-8 radios">
          {{ radios('support_mobile', {'1':'开启', '0':'关闭'}, storageSetting.support_mobile) }}
          <div class="help-block">
            MP4文件较适合在不同手机机型下使用不同手机浏览器进行视频播放；<br/>
            开启后，新上传视频文件会生成一个MP4格式视频，并且在手机浏览器下默认使用MP4播放；<br/>
            <span style="color: red">注：MP4视频防盗性较差，且已生成MP4的文件关闭后也会存在，请慎重考虑。</span>
          </div>
        </div>
      </div>
    <div class="row form-group">
      <div class="col-md-3 control-label">
        <label for="cloud_bucket" >云视频转码类型</label>
      </div>
      <div class="controls col-md-8 radios">
        <p>
          <span class="form-control-static text-info">画质</span>
          {{ radios('video_quality', {'low':'流畅 <span class="text-muted">(适合PPT讲解)</span>', 'normal':'标准 <span class="text-muted">(适合屏幕录制、摄像头拍摄)</span>', 'high': '精细 <span class="text-muted">(适合动态电影)</span>'}, storageSetting.video_quality) }}
        </p>

        <p>
          <span class="form-control-static text-info">音质</span>
          {{ radios('video_audio_quality', {'low':'流畅', 'normal':'标准', 'high': '高品'}, storageSetting.video_audio_quality) }}
        </p>

      </div>
    </div>



    <hr>

    <div class="row form-group">
      <div class="col-md-3 control-label">
        <label>云视频水印</label>
      </div>
      <div class="controls col-md-8 radios " data-content="123">
        {# {{ radios('video_watermark', {'0':'关闭', '1':'开启播放器水印', '2':'开启内嵌水印'}, storageSetting.video_watermark) }} #}

        <label>
          <input type="radio" name="video_watermark" value="0" {% if storageSetting.video_watermark == 0 %}checked="checked"{% endif %}> 关闭
        </label>
        <label class="video-watermark-property-tips" data-content="
        播放时水印将会覆盖在视频上，可随时更换；
        已经通过系统使用了内嵌水印的视频，将不会显示播放器水印。
        ">
          <input type="radio" name="video_watermark" value="1" {% if storageSetting.video_watermark == 1 %}checked="checked"{% endif %}> 开启播放器水印
        </label>
        <label class="video-watermark-property-tips" data-content="
        能够更好的保护视频版权；
        上传时将水印嵌入视频编码中，不可删改；
        未嵌入水印的视频在播放时将会显示播放器水印。
        ">
          <input type="radio" name="video_watermark" value="2" {% if storageSetting.video_watermark == 2 %}checked="checked"{% endif %}> 开启内嵌水印
        </label>
      </div>
    </div>

    <div class="row form-group">
      <div class="col-md-3 control-label">
        <label>设置播放器水印图片</label>
      </div>
      <div class="controls col-md-8 radios">

        <div id="cloud-video-watermark-container">{% if storageSetting.video_watermark_image %}<img src="{{ filepath(storageSetting.video_watermark_image) }}">{% endif %}</div>
        <button class="btn btn-default" id="cloud-video-watermark-upload" type="button" data-url="{{ path('admin_setting_cloud_video_watermark_upload') }}">上传</button>
        <button class="btn btn-default" id="cloud-video-watermark-remove" type="button" data-url="{{ path('admin_setting_cloud_video_watermark_remove') }}" {% if not storageSetting.video_watermark_image %}style="display:none;"{% endif %}>删除</button>

        <div class="help-block">支持png/gif/jpg格式图片，建议使用半透明的png图片。（推荐图片大小为150×50）</div>
        <input type="hidden" name="video_watermark_image" value="{{ storageSetting.video_watermark_image }}">
      </div>
    </div>

    <div class="row form-group">
      <div class="col-md-3 control-label">
        <label>设置内嵌水印图片</label>
      </div>
      <div class="controls col-md-8 radios">

        <div id="cloud-video-embed-watermark-container">{% if storageSetting.video_embed_watermark_image %}<img src="{{ filepath(storageSetting.video_embed_watermark_image) }}">{% endif %}</div>
        <button class="btn btn-default" id="cloud-video-embed-watermark-upload" type="button" data-url="{{ path('admin_setting_cloud_video_embed_watermark_upload') }}">上传</button>
        <button class="btn btn-default" id="cloud-video-embed-watermark-remove" type="button" data-url="{{ path('admin_setting_cloud_video_embed_watermark_remove') }}" {% if not storageSetting.video_embed_watermark_image %}style="display:none;"{% endif %}>删除</button>

        <div class="help-block">支持png/gif/jpg格式图片，建议使用半透明的png图片（推荐图片大小为270×90）。</div>
        <input type="hidden" name="video_embed_watermark_image" value="{{ storageSetting.video_embed_watermark_image }}">
      </div>
    </div>

    <hr>

    <div class="row form-group" >
      <div class="col-md-3 control-label">
        <label>云视频指纹</label>
      </div>  
      <div class="controls col-md-8 radios">
        {{ radios('video_fingerprint', {'0':'关闭', '1':'开启'}, storageSetting.video_fingerprint) }}
        <div class="help-block">开启后，将在视频播放中随机时间、随机位置显示当前网站域名及{% if setting('default.user_name') %}{{setting('default.user_name')|default('学员')}}{% else %}学员{% endif %}的用户名。</div>
      </div>
    </div>
    {% if storageSetting.upload_mode == 'cloud' %}
    
    <hr>
    <div class="upload-mode">
    </div>

    <div class="row form-group">
      <div class="col-md-3 control-label" >
        <label>云视频片头</label>
      </div>

      <div class="controls col-md-8 radios">
        {{ radios('video_header', {'0':'关闭', '1':'开启'}, storageSetting.video_header|default(0)) }}
      </div>
    </div>
    <div class="row form-group" id="upload-panel"
    data-params-url="{{ path('admin_uploadfile_head_leader_params', {storage:storageSetting.upload_mode}) }}"
    data-hls-encrypted="1"
    >
      <div class="col-md-3" >
      </div>
      <div class="controls col-md-8">


        <div class="head-leader-edit" 
          {% if not headLeader|default(null) %}
          style="display:none;"
          {% endif %}
          >
          <span data-role="placeholder">{{headLeader.filename|default('')}}</span>
          <button class="btn btn-link btn-sm edit-btn" type="button"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
          {% if headLeader.convertStatus|default(null) != 'success' %}
          <div class="alert alert-warning" data-role="waiting-tip">
          正在转换视频格式，转换需要一定的时间，期间将不能播放该视频。<br />转换完成后将以站内消息通知您。
          </div>
          {% endif %}

        </div>

        <div class="file-chooser-main" 
          {% if headLeader|default(null) %}
            style="display:none;"
          {% endif %}
        >
          {% set token = uploader_token('headLeader', 0, 'private') %}
          <div id="balloon-uploader"
            data-init-url="{{ path('uploader_init', {token:token}) }}"
            data-finish-url="{{ path('uploader_finished', {token:token}) }}"
            data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
            data-accept="{{ uploader_accept('headLeader', 'cloud_video')|json_encode }}"
            data-process="{{ uploader_process('headLeader') }}">
          </div>

          <div class="alert alert-info">
            <ul>
              <li>支持<strong>mp4, avi, flv, f4v, wmv, mov, rmvb, mkv, m4v</strong>格式的视频文件上传，文件大小不能超过<strong>10 MB</strong>。</li>
              <li>支持<strong>断点续传</strong>（仅支持HTML5浏览器）。</li>
              <li>视频将上传到<strong>云视频服务器</strong>，上传后会对视频进行格式转换，转换过程需要一定的时间。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="row form-group">
      <div class="col-md-3 control-label"></div>
      <div class="controls col-md-8">
        <button type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>

    <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
  </form>
  {% endif %}
  {% endif %}
</div>
{% endblock %}